<script setup lang="ts">
const title = import.meta.env.VITE_GLOB_APP_TITLE
const isOpen = inject<Ref<boolean>>('isOpen')
const isOpenChange = inject('isOpenChange') as () => void
</script>

<template>
  <div class="nav-title" @click="isOpenChange">
    <img class="logo" src="https://vitejs.cn/logo.svg" alt="" />
    <span v-if="isOpen">{{ title }}</span>
  </div>
</template>

<style lang="scss" scoped>
.nav-title {
  text-align: center;
  height: 65px;
  line-height: 50px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  img {
    width: 30px;
    display: block;
  }
  span {
    margin-left: 8px;
  }
}
</style>
